<template>
  <div>
    <Searchbar>
      <p class="page-title">考试管理</p>
      <el-input @change="getList" v-model="search.exam_name" placeholder="请输入试卷名称"></el-input>
      <el-button class="search-btn" @click="getList" type="primary">查询</el-button>
    </Searchbar>

    <TableBar>
      <el-button @click="goCreate" type="primary">新建考试</el-button> 
      <el-button @click="go('questions')" type="warning">题库管理</el-button> 
    </TableBar>

    <table cellspacing="0" cellpadding="0" class="obj-con-table">
      <thead>
        <tr>
          <td>考试名称</td>
          <td>考试时长</td>
          <td>考试时间</td>
          <td>状态</td>
          <td>创建时间</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(c, i) in tableData" :key="'course' + i">
          <td class="flex-row-around" @click="goExam(c.id)">
            <div class="table-list-item-avatar">
              <div>{{c.exam_name.substring(0, 4)}}</div>
            </div>
            <div class="table-list-item-con-name">
              <p>{{c.exam_name}}</p>
              <p class="price">￥{{c.price/100}}</p>
            </div>
          </td>
          <td>{{c.duration}}</td>
          <td>{{c.start_time || '不定时'}}</td>
          <td><status-show :status="c.status" /></td>
          <td>{{c.create_time}}</td>
          <td>
            <div>
              <!-- <el-button @click="goEdit(c)" type="primary">编辑</el-button> -->
              <el-button v-if="c.status == 'C'" @click="onUp(c)" type="primary">上架</el-button>
              <el-button v-if="c.status == 'N'" @click="onDown(c)" type="warning">下架</el-button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <el-pagination
      background
      layout="prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      @size-change=handleSizeChange
      :current-page.sync="search.page"
      :page-size="search.page_size"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
import pageMixin from "@/mixins/pageMixin";
import { examModel } from "@/api/models";
import Searchbar from "@/components/Searchbar";
import TableBar from "@/components/TableBar";
import goMixin from '@/mixins/goMixin.js'
import StatusShow from '@/components/StatusShow'
import { WConfirm } from '../utils/utils';
import {Message} from 'element-ui'
export default {
  mixins: [pageMixin, goMixin],
  components: { Searchbar, TableBar, StatusShow },
  data() {
    return {
      tableData: [],
      total: 0,
      search: {
        paper_name: null,
        course_name: null,
        class_status: null,
        page: 1,
        page_size: 10,
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      console.log("getList");
      examModel.list( this.search, (res) => {
          this.total = res.total_records;
          this.tableData = res.data.map((v) => {
            return v;
          });
        }, (err) => {
          console.log(err);
        }
      );
    },
    goCreate() {
      this.$router.push('/create/exam')
    },
    goEdit(row) {
      this.$router.push('/edit/exam/' + row.id)
    },
    onUp(row) {
      WConfirm('确定上架考试' + row.exam_name, () => {
        this.onStatusAction(row.id, 'N')
      })
    },
    onDown(row) {
      WConfirm('确定下架考试' + row.exam_name, () => {
        this.onStatusAction(row.id, 'C')
      })
    },
    onStatusAction(id, status) {
      examModel.action({
        id: id,
        status: status
      }, res => {
        Message.success(res.message)
        this.getList()
      }, err => {
        Message.error(err.message)
      })
    }
  },
};
</script>
<style lang="scss">
</style>